<template>
  <div class="my-dream">
    <nav-bar></nav-bar>
    <div class="my-dream-page">
      <div class="title">我参与的</div>
      <div class="cards-container clearfix">
        <dream-card :value="item" v-for="item,i in record" :key="i"></dream-card>
      </div>
      <div class="pagination-container">
        <el-pagination
          :page-size="offset"
          layout="prev, pager, next"
          :total="total"
          :current-page="page"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import DreamCard from 'views/components/dreamCard'
import { getMyDream } from 'api/dream'

export default {
  name: 'myDream',
  components: {
    NavBar,
    DreamCard
  },
  data() {
    return {
      record: [],
      total: 0,
      page: 1,
      offset: 10
    };
  },
  created() {
    getMyDream()
    .then(res => {
      this.record = res.data.record
      this.total = res.data.page.last_page * this.offset
    })
    .catch(err => console.log(err))
  },
  methods: {
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.my-dream{
  .my-dream-page{
    width: 1200px;
    margin: 0 auto;
    .title{
      font-size: 20px;
      color: #999;
      margin-bottom: 20px;
    }
    .cards-container{
      margin: -10px;
    }
  }
}
</style>